import React from 'react';
import { ArrowUpOutlined } from '@ant-design/icons';
import { message } from 'antd';

const ScrollToTop = () => {
  // 点击返回顶部
  const scrollToTop = () => {
    try {
      // 尝试获取主要滚动容器
      const contentBody = document.querySelector('.content-body');
      const dashboard = document.querySelector('.dashboard');
      const mainElement = document.documentElement;
      const body = document.body;
      
      // 尝试所有可能的滚动方法
      if (contentBody) {
        contentBody.scrollTo({ top: 0, behavior: 'smooth' });
        contentBody.scrollTop = 0;
      }
      
      if (dashboard) {
        dashboard.scrollTo({ top: 0, behavior: 'smooth' });
        dashboard.scrollTop = 0;
      }
      
      // 滚动整个页面
      window.scrollTo({ top: 0, behavior: 'smooth' });
      mainElement.scrollTop = 0;
      body.scrollTop = 0;
      
      // 视觉反馈
      message.success('已返回顶部');
    } catch (err) {
      console.error('返回顶部失败:', err);
    }
  };

  return (
    <div 
      className="custom-scroll-to-top"
      onClick={scrollToTop}
    >
      <ArrowUpOutlined />
      <style jsx="true">{`
        .custom-scroll-to-top {
          position: fixed;
          right: 40px;
          bottom: 40px;
          width: 60px;
          height: 60px;
          background-color: #1890ff;
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow: 0 3px 10px rgba(0,0,0,0.3);
          z-index: 10000;
          font-size: 28px;
          border: 3px solid #fff;
          transition: all 0.3s ease;
          animation: pulse 2s infinite;
        }
        
        .custom-scroll-to-top:hover {
          background-color: #40a9ff;
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
          animation: none;
        }
        
        @keyframes pulse {
          0% {
            box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.7);
          }
          70% {
            box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
          }
          100% {
            box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
          }
        }
      `}</style>
    </div>
  );
};

export default ScrollToTop; 